import React, { Component } from 'react'
import { Link, Route } from 'react-router-dom'
import Inner from './inner'
import Outer from './outer'

class Nav extends Component {
    render() {
        return (
            <div>
                <p><Link to='/detail/1'>文章1</Link></p>
                <p><Link to='/detail/2'>文章2</Link></p>
                <p><Link to='/detail/3?title="张三"'>文章3</Link></p>
                <div>
                    <Link to={`${this.props.match.url}/inner`}>inner</Link>***
                    <Link to={`${this.props.match.url}/outer`}>outer</Link>
                </div>
                <Route path={`${this.props.match.path}/inner`} component={Inner} />
                <Route path={`${this.props.match.path}/outer`} component={Outer} />
            </div>
        )
    }
}

export default Nav